<template>
  <div style="overflow: hidden">
    <div v-if="state == 1">
      <div class="upload_video upload_form">
        <div class="upload_form__inner">
          <van-uploader
            :before-read="beforeRead"
            :after-read="afterRead"
            :max-size="209715200"
            :accept="'video/*'"
            @oversize="oversize"
          >
            <img src="./../../assets/uploadvideo.png" alt="" />
            <div>
              {{ name }}
            </div>
            <br />
          </van-uploader>
          <van-overlay :show="show" @click="show = false">
            <van-loading
              type="spinner"
              style="position: fixed; top: 50%; left: 50%"
            />
          </van-overlay>
        </div>
      </div>
      <div class="upload_video upload_form">
        <div class="upload_form__inner upload_form__inner2">
          <div class="from_div">
            <div class="from_left">
              <span class="from_span">职业：</span>
            </div>
            <input type="text" v-model="school" />
          </div>
          <div class="from_div">
            <div class="from_left">
              <span class="from_span">创作者：</span>
            </div>
            <input type="text" v-model="author" />
          </div>
          <div class="from_div">
            <div class="from_left">
              <span class="from_span">联系电话：</span>
            </div>
            <input type="text" v-model="phone" />
          </div>
          <div class="from_div">
            <div class="from_left">
              <span class="from_span">身份证：</span>
            </div>
            <input type="text" v-model="idCard" />
          </div>
          <div>
            <img
              @click="submit"
              style="margin-bottom: 5px"
              class="submit"
              src="./../../assets/submit.png"
              alt=""
            />
          </div>
          <div style="font-size: 12px">
            如视频过大未能上传成功，请将作品投稿至邮箱rcyzqc@163.com。
          </div>
          <!-- <div>
                    <img @click="goTwo" style="margin-top: 5px;" class="submit" src="./../../assets/shixi.png" alt="">
                </div> -->
        </div>
      </div>
    </div>
    <div class="upload-tip">注：如团体参赛请填写主要联系人信息</div>
    <div v-if="state == 2">
      <div class="upload_video">
        <div class="from_div">
          <div class="from_left">
            <span class="from_span">姓名：</span>
          </div>
          <input type="text" v-model="shixi_name" />
        </div>
        <div class="from_div">
          <div class="from_left">
            <span class="from_span"
              ><span>就</span><span>读</span><span>学</span><span>校</span
              ><span>：</span></span
            >
          </div>
          <input type="text" v-model="shixi_school" />
        </div>
        <div class="from_div">
          <div class="from_left">
            <span class="from_span"
              ><span>年</span><span>级</span><span>：</span></span
            >
          </div>
          <input type="text" v-model="shixi_class" />
        </div>
        <div class="from_div">
          <div class="from_left">
            <span class="from_span"
              ><span>专</span><span>业</span><span>：</span></span
            >
          </div>
          <input type="text" v-model="shixi_major" />
        </div>
        <div class="from_div">
          <div class="from_left">
            <span class="from_span"
              ><span>电</span><span>话</span><span>：</span></span
            >
          </div>
          <input type="text" v-model="shixi_phone" />
        </div>
        <div>
          <img
            @click="submit1"
            style="margin-bottom: 5px"
            class="submit"
            src="./../../assets/shixitijiao.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div v-if="state == 3">
      <div class="wancheng">
        <img src="./../../assets/wancheng.png" alt="" />
      </div>
      <div class="backindex">
        <img
          @click="goBack"
          style="margin-top: 5px"
          class="submit"
          src="./../../assets/backindex.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import router from "./../../router/index";
import { Toast } from "vant";
import axios from "axios";

export default {
  data() {
    return {
      value: "",
      show: false,
      name: "",
      video: "",
      author: "",
      school: "",
      phone: "",
      idCard: "",
      state: 1,
      shixi_name: "",
      shixi_school: "",
      shixi_class: "",
      shixi_major: "",
      shixi_phone: "",
    };
  },
  components: {},
  mounted() {
    this.state = 1;
  },
  methods: {
      oversize(){
           Toast("视频大小超过限制");
           this.show = false
      },
    beforeRead(file) {
      if (!file.type.includes("video")) {
         Toast("请上传视频文件");
        return false;
      } else if (file.size > 200 * 1024 * 1024) {
         Toast("视频大小超过限制");
        return false;
      } else {
          this.show = true
        return true;
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.show = true;
      let formData = new FormData();
      formData.append("file", file.file);

      this.$nextTick(function () {
        if (file.file && file.file.name) {
          console.log(file.file);
         try {
             this.http
            .post("/common/upload_file", formData, false, false, {
              "Content-Type": "multipart/form-data",
            })
            .then((res) => {
              console.log(file.file);
              console.log(res);
              this.show = false;
              this.name = file.file.name;
              this.video = res.data.url;
              console.log(this.name);
              Toast("上传文件成功");
            })
            .catch((err) => {
              console.log(file.file);
              console.log(err);
             Toast("上传文件失败,查看是否视频过大，或者网络异常");
              this.show = false;
            });
         } catch (error) {
              this.show = false;
             Toast("上传文件失败,查看是否文件过大，或者网络异常");
         }
          
        }
      });
    },
    submit() {
      if (!this.name) {
        Toast("请上传视频");
        return false;
      }
      if (!this.author || !this.school || !this.phone || !this.idCard) {
        Toast("请填写完整信息");
        return false;
      }
      if (
        !/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(
          this.idCard
        )
      ) {
        Toast("身份证不合法");
        return false;
      }
      this.http
        .post("/home/addworks", {
          video: this.video,
          author: this.author,
          school: this.school,
          phone: this.phone,
          idCard: this.idCard,
          videocover: "",
        })
        .then((res) => {
          console.log(this.name);
          Toast("提交成功");
        })
        .catch((err) => {
          Toast(Array.isArray(err.msg) ? err.msg[0].message : err.msg);
        });
    },
    submit1() {
      if (
        !this.shixi_name ||
        !this.shixi_school ||
        !this.shixi_class ||
        !this.shixi_major ||
        !this.shixi_phone
      ) {
        Toast("请填写完整信息");
        return false;
      }
      this.http
        .post("/home/internshipcreate", {
          name: this.shixi_name,
          school: this.shixi_school,
          class: this.shixi_class,
          major: this.shixi_major,
          phone: this.shixi_phone,
        })
        .then((res) => {
          Toast("提交成功");
          this.state = 3;
        })
        .catch((err) => {
          Toast(Array.isArray(err.msg) ? err.msg[0].message : err.msg);
        });
    },
    goTwo() {
      this.state = 2;
    },
    goBack() {
      this.state = 1;
      this.$emit("setIndex", 1, "/");
    },
  },
  mounted() {},
};
</script>

<style scoped>
.upload_video .submit {
  width: 260px;
  height: 30px;
  margin: 10px 0;
}
.from_div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 5px 3vw;
  line-height: 28px;
}
.from_left {
  width: 30%;
}
.from_div input {
  border: none;
  background-color: #9a1e08;
  border: 1px solid #f6da91;
  border-radius: 15px;
  width: 70%;
}
.from_span {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  color: #f6da91;
  font-weight: bold;
}
.upload_video {
  margin: 10px 3vw;
  background-color: white;
  border-radius: 10px;
}
.upload_video img {
  width: 80px;
  height: 55px;
  margin: 50px auto;
}
.wancheng {
  margin: 50px auto;
  width: 40%;
}
.backindex {
  margin: 50px auto;
  width: 30%;
}
.wancheng img,
.backindex img {
  width: 100%;
}
.upload-bg {
  background: url("./../../assets/uploadbg.png");
  background-size: 100% 100%;
}
.upload-tip {
  color: #f6da91;
  font-size: 12px;
  text-align: center;
}
.upload_form {
  background: #d19f65;
  padding: 7px 2px;
  border-radius: 10px;
}
.upload_form__inner {
  background: #a01e08;
  border-radius: 10px;
}
.upload_form__inner2 {
  padding: 20px;
}
.upload_form__inner > div {
  color: #f6da91;
}
</style>
